<template>
	<view class="cu-modal bottom-modal" :class="isShow ? 'show':''" @tap="osModal">
		<view class="cu-dialog" @tap.stop="">
			<view class="cu-bar bg-white">
				<view class="action text-blue" @tap="osModal">取消</view>
				<view class="action text-blue" @tap="osModal(1)">确定</view>
			</view>
			<view class="cusmodalbody ">
				<view class="flex cuscontent">
					<view class="cuscontent-left text-center">
						<view class="cuscontent-left-item padding-sm"
						 @click="chooseDateFn" :class="item.checked ? 'active' : ''"
						 v-for="(item,index) in dateList" :key="index" :data-index="index" :data-item="item">
							<text>{{item.value}}</text>
						</view>
					</view>


					<view class="cuscontent-right">
						<view @click="chooseTimeFn" class="cright  grid col-2"
						 v-for="(item,index) in dateList[checkDate].timeList"
						 :key="index" :data-index="index" :data-code="item.code">
							<view class="padding-xs cright-item">
								<text :class="[{'text-blue':item.checked}]">{{item.value}}</text>
							</view>
							<view class="padding-xs cright-item">
								<text v-if="item.checked" class="lg text-blue cuIcon-check"></text>
							</view>
						</view>
					</view>

				</view>

			</view>
		</view>
	</view>

</template>

<script>
	import {
		dateList,
	} from '@/utils/common.js';
	import {
		formateDate,
		formateDateToUTC
	} from '@/utils/util.js';
	export default {
		props: {
			isShow: {
				type: Boolean,
				default: false
			},
			curDate: {
				type:Number,
				default:0
			},
		},
		data() {
			return {
				dateList: [],
				checkedTime: '',
				isNow: true,
				checkDate: 0,
			};
		},
		created() {
			this.getCurTimeToCalc();
		},
		methods: {
			//重选：时间回显：
			rewriteTime(){
				(dateList||[]).map((d, dindex) => {
					if (this.curDate == dindex) {
						d.checked = true;
						// return;
					} else {
						d.checked = false;
					}
				})
			},
			osModal(confirm) {
				if (confirm == 1) {
					this.calcTime(); //点击确认计算时间
					//通过回调传值给父组件：
					//this.checkDate 目的-->重选时回显
					this.$emit('getModalVal', false, this.checkedTime, this.isNow, this.checkDate);
				} else {
					this.$emit('getModalVal', false);
				}
			},
			getCurTimeToCalc() {
				if(dateList[0].value==="今天"){ //判断排出，也可以用深拷贝，不影响元数据结构
					const nowTime = formateDate(new Date(), 'HH');
					const arr = dateList[0].timeList;
					let newArr = arr.filter((v) => (v.code - 1) > nowTime);
					if(newArr.length>0){
						if (newArr.length >= 2) {
							newArr = [{
								code: 'now',
								value: '两小时内',
								checked:true
							}, ...newArr]
						}
						dateList[0].timeList = newArr;
					}else{
						dateList.shift();
					}
				}
				
				//日期回显：checkDate				
				dateList.map((d, dindex) => {
					if (this.curDate == dindex) {
						d.checked = true;
						// return;
					} else {
						d.checked = false;
					}
				})
				
				this.dateList = dateList;
				this.checkDate = this.curDate;
			},
			//选择日期
			chooseDateFn(e) {
				const {
					index
				} = e.currentTarget.dataset;
				this.checkDate = index;
				this.dateList.map((v, i) => {
					if (index == i) {
						v.checked = true;
					} else {
						v.checked = false;
					}
				});
			},
			//选择时间
			chooseTimeFn(e) {
				//每天各自的时间段的状态自己维护，选中就设置为true
				const {
					index
				} = e.currentTarget.dataset;
				this.dateList.map((p) => {
					if (p.checked && p.timeList) {
						const arr = p.timeList;
						arr.map((c, i) => {
							if (index == i) {
								c.checked = true;
							} else {
								c.checked = false;
							}
						})
					}
				})
			},
			//计算时间
			calcTime() {
				//计算时间---通过选择的时间节点推算，如果选择今天两小时内+两个小时，如果选择时间段，取最后一个时间点
				const today = new Date().getTime();
				const {
					dateList
				} = this;
				let newDay = '';
				let newTime = ''
				let isNow = false;
				dateList.map((p, pindex) => {
					if (p.checked) {
						newDay = today + 1000 * 60 * 60 * 24 * pindex;
						if (p.timeList) {
							const timeArr = p.timeList;
							timeArr.map((c, cindex) => {
								if (c.checked) {
									if (c.code === 'now') { //今天两小时内
										newTime = formateDate(today + 1000 * 60 * 60 * 2, 'HH:mm');
										isNow = true;
									} else {
										newTime = c.code + ':00';
									}
									return;
								}
							})
						}
						return;
					}
				});

				this.isNow = isNow;
				newDay = formateDate(newDay, 'YYYY-MM-DD');
				this.checkedTime = newDay + ' ' + newTime;

			}
		}
	}
</script>

<style lang="scss" scoped>
	.cusmodalbody {
		max-height: 300px;
		overflow-y: auto;
		background-color: #fff;

		ul,
		li {
			padding: 0;
			margin: 0;
			list-style: none
		}

		.cuscontent {
			&-left {
				width: 33.3%;
				background-color: #F2F2F2;

				&-item {}

				.active {
					background-color: #fff;
				}
			}

			&-right {
				flex-grow: 1;

				.cright {
					&-item {
						padding: 10px;
					}
				}
			}
		}

	}
</style>
